<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			.xq-window-body {
			    margin-top: -8px;
				background-color: #efeff4 !important;
			}
			.mui-card-content .content-info{
				padding: 8px 16px;
			}
			.xq-writer-detail-content .dynasty-show{
				font-size: 14px;
				color: #8f8f94;
			}
			.xq-writer-detail-content .writer-header-content{
				box-shadow: 0px -1px 3px #eeeeee;
				border-bottom: 1px solid #eeeeee;
				/* height: 60px !important; */
				background-color: white;
			}
			.xq-writer-detail-content .writer-header-bg{
				height:180px;
				background-color:transparent;
				/* background-image:url(../images/writer-detail-bg.jpg);
				background-size: cover; */
			}
			.inner-xq-padding-content{
				padding: 0.5rem;
				background-color: white;
				border: 12px solid #eee;
			}
			.xq-padding-content {
			    padding: 0.5rem;
			    background-color: white;
			    border: 12px solid #eee;
				margin-bottom: 3px;
				box-shadow: 0px 2px 3px lightgrey;
			}
			.content-title{
				color: #ffb307;
			}
			.xq-card-like-list{
				font-size: 16px;
			}
			.xq-card-like-list li {
			    border-bottom: 1px solid  #eee !important;
			}
			.xq-fixed-to-header .smaller-header-img {
			    margin-top: -6px !important;
			    width: 60px !important;
			    height: 60px !important;
			}
			.writer-header-bg{
				padding: 0 !important;
			}
			.writer-header-bg img{
				object-fit: fill;
				width: 100% !important;
				height: 100% !important;
			}
			#fixed-writer-content.xq-fixed-to-header{
				top:36px;
			}
			.i-like-it-flag-class{
				color: red;
			}
			.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child {
			    border-bottom-right-radius: 0px;
			    border-bottom-left-radius: 0px;
				border-bottom: 0px solid #eee !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="writer-detail-header-title">作者</h1>
			<a class="mui-icon mui-icon-settings mui-pull-right xq-header-bar-btn" id='writer-det-page-setting'></a>
			<a class="mui-icon mui-icon-star mui-pull-right xq-header-bar-btn" id='i-like-it'></a>
		</header>
		<div id="fixed-writer-content" class="mui-card xq-writer-detail-content xq-transparent-card xq-hidden xq-fixed-to-header">
		</div>
		<div id='xq-writer-detail-scroll-wrapper' class="mui-content mui-scroll-wrapper" >
			<div class="mui-scroll">
				<div class="xq-window-body">
					<div id="xq-writer-detail-card">
						<div class="mui-card xq-writer-detail-content xq-transparent-card">
							<!--页眉，放置标题-->
							<div class="mui-card-header mui-card-media writer-header-bg" >
								<img :src="coverImg">
							</div>
							<div class="mui-card-header mui-card-media writer-header-content">
								<img class="writer-header" :src="headImageUrl"/>
								<div class="mui-media-body">
									<div class="writer-name">{{name}} 
										<span show-name='dynasty' class="dynasty-show">{{dynasty}}</span>
										<p>
											<span>作者详情：{{attrCount}} 条</span>
											<span style="margin-left: 4px;margin-right: 4px; color:#EEEEEE;">|</span>
											<span>收录作品：{{shiwenCount}} 篇</span> 
										</p>
									</div>
								</div>
							</div>
							<!--内容区-->
							<div class="mui-card-content">
								<div class="inner-xq-padding-content">
									<!-- <div class="content-title">简介</div> -->
									<div class="content-info select-able">{{simpleIntro}}</div>
								</div>
							</div>
						</div>
						<div v-if='attrList' class="mui-card xq-flat-card">
							<div class="mui-card-header content-title">详情</div>
							<!-- <div class="content-title">详细</div> -->
							<ul id='writer-attr-list-ul' class="mui-table-view xq-card-like-list xq-card-like-small">
								<li class="mui-table-view-cell" v-for="(attrInfo,index) in attrList" :index="index">
									<a class="mui-navigate-right">{{attrInfo.attrName}}</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="mui-card xq-flat-card">
						<div class="mui-card-header content-title">作品</div>
						<!-- <div class="content-title">作品</div> -->
						<ul id='writer-shiwen-list-ul' class="mui-table-view xq-card-like-list">
							<li v-for="(itemInfo,index) in shiwenList" class="mui-table-view-cell" :info-id="itemInfo.id" :index="index">
								<div class="mui-media-body">
									<div class="xq-media-body-title-line">
										<div class="left-title">{{itemInfo.title}}</div>
										<div class="right-title">[{{itemInfo.dynasty}}] {{itemInfo.writer}}</div>
									</div>
									<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.shortContent}}</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/vue-2.3.3.js"></script>
		<script src="../js/commonUtils.js"></script>
		<script src="../js/shiwenListLoader.js"></script>
		<script src="../js/writerDetailPageManager.js"></script>
		<script type="text/javascript">
			mui.init();
			//
			mui.ready(function(e){
				if(mui.os.plus){
					return;
				}
				var randomId=Math.floor(Math.random()*1000+1);
				initWriterPageInfo(randomId);
			});
			//
			mui.plusReady(function(e){
				var self = plus.webview.currentWebview();
				var writerId = self.writerId;//获得参数
				console.info('writerId='+writerId);
				initWriterPageInfo(writerId)
			});
			//
			function initWriterPageInfo(writerId){
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("writerDetail");
				SettingInfoManager.setPageFontFromSetting();
				
				var writerDetailPageManager=new WriterDetailPageManager();
				writerDetailPageManager.init({writerId:writerId});
			}
			
		</script>
	</body>

</html>
